<script setup>

</script>
<script>
export default {
  props: {
    text: String,
    imageUrl: String
  }
}
</script>
<template>
<div class="type">
  <div class="head">
    <div class="img">
      <img :src="imageUrl" alt="Image">
    </div>
  </div>
  <div class="foot">
    <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp{{text}}&nbsp&nbsp&nbsp</p>
  </div>
</div>
</template>

<style scoped lang="scss">
.type{
  width: 10%;
  height: 70px;
  margin-top:20px ;
}
.head{
  width: 100%;
  height: 50px;
}
.img{
  width: 50px;
  height: 50px;
  margin: auto;
  img{
    width: 50px;
    height: 50px;
  }
  .foot{
    width: 100%;
    height: 20px;
    position: relative;
  }

}
.foot:hover{
    color: #FF1268;
  }

</style>